<template>
  <div>
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="[0]"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item v-for="(item, index) in list" :key="index" @click="changeMap(item.path)" >
          <a-icon :type="item.icon" />
          <span :key="item.key" >{{item.name}}</span>
        </a-menu-item>
      </a-menu>
  </div>
</template>

<script>
export default {
    data(){
    return{
      list:[
        {
          key: 1,
          name: "综合信息",
          path: "home",
          icon: "radar-chart"
        },
        {
          key: 2,
          name: "全国疫情气泡图",
          path: "map1",
          icon: "pie-chart"
        },
        {
          key: 3,
          name: "全球疫情气泡图",
          path: "map2",
          icon: "bar-chart"
        },
        {
          key: 4,
          name: "全国疫情热力图",
          path: "map3",
          icon: "dot-chart"
        },
        {
          key: 5,
          name: "全球疫情热力图",
          path: "map4",
          icon: "heat-map"

        },
      ]
    }
  },
  methods:{
    changeMap(path){
      this.$router.push({
        name: path
      })
    }
  }

}
</script>

<style scoped>

</style>